<template>
  <div class="app-container">
    <el-card class="form-container" shadow="never">
      <el-form :model="storeSetting" ref="storeSettingFrom" label-width="150px">
        <el-form-item label="云打印机序号：">
          <el-input v-model="storeSetting.printerSn"></el-input>
        </el-form-item>
        <el-form-item label="自动接单/打印">
          <el-switch
            v-model="autoPrintStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleStatusChange"
          ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveStoreSetting">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  getStoreSetting,
  createStoreSetting,
  updateStoreSetting
} from "@/api/sys/storesetting";

const defaultStoreSetting = {
  printerSn: "",
  isAuto: 0,
  storeId: null
};

export default {
  data() {
    return {
      autoPrintStatus: false,
      listLoading: true,
      storeSetting: Object.assign({}, defaultStoreSetting),
      currentStoreId: null
    };
  },
  created() {
    this.currentStoreId = this.$route.query.storeId;
    console.log(this.currentStoreId);
    this.getStoreSetting();
  },
  methods: {
    getStoreSetting() {
      this.listLoading = true;
      getStoreSetting(this.currentStoreId).then(response => {
        this.listLoading = false;
        if (null != response.data) {
          this.storeSetting = response.data;
          if (this.storeSetting.isAuto == 1) {
            this.autoPrintStatus = true;
          } else {
            this.autoPrintStatus = false;
          }
        }
      });
    },
    handleStatusChange(val) {
      console.log(val);
      if (val == true) {
        this.storeSetting.isAuto = 1;
      } else {
        this.storeSetting.isAuto = 0;
      }
    },
    saveStoreSetting() {
      if (this.storeSetting.id) {
        updateStoreSetting(this.storeSetting.id, this.storeSetting).then(
          response => {
            if (response.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1000
              });
            } else {
              this.$message({
                message: response.msg,
                type: "error",
                duration: 1000
              });
            }
          }
        );
      } else {
        this.storeSetting["storeId"] = this.currentStoreId;
        createStoreSetting(this.storeSetting).then(response => {
          if (response.code == 200) {
            this.$message({
              message: "保存成功",
              type: "success",
              duration: 1000
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 1000
            });
          }
        });
      }
    }
  },
  components: {}
};
</script>

<style>
.commission-ratio {
  margin-top: 10px;
}
.grid-content {
  height: 40px;
  line-height: 40px;
}
.commission-ratio-btn {
  margin-top: 10px;
}
</style>
